<template>
  <div class="order-query-system">
    <!-- 查询表单组件 -->
    <div class="query-form">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- 订单状态下拉选择 -->
        <el-form-item label="订单状态">
          <el-select v-model="form.orderStatus" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待支付" value="pendingPayment"></el-option>
            <el-option label="已支付" value="paid"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
            <el-option label="已签收" value="已签收"></el-option>
          </el-select>
        </el-form-item>

        <!-- 始发地下拉选择 -->
        <el-form-item label="始发地">
          <el-select v-model="form.startPlace" placeholder="请选择">
            <el-option label="北京" value="beijing"></el-option>
            <el-option label="上海" value="shanghai"></el-option>
            <el-option label="广州" value="guangzhou"></el-option>
            <!-- 可根据实际需求添加更多选项 -->
          </el-select>
        </el-form-item>

        <!-- 目的地下拉选择 -->
        <el-form-item label="目的地">
          <el-select v-model="form.destination" placeholder="请选择">
            <el-option label="深圳" value="shenzhen"></el-option>
            <el-option label="成都" value="chengdu"></el-option>
            <el-option label="杭州" value="hangzhou"></el-option>
            <!-- 可根据实际需求添加更多选项 -->
          </el-select>
        </el-form-item>

        <!-- 签收日期选择 -->
        <el-form-item label="签收日期">
          <el-date-picker
            v-model="form.signDate"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <!-- 关键词输入框 -->
        <el-form-item>
          <el-input v-model="form.keyword" placeholder="请输入关键词搜索"></el-input>
        </el-form-item>

        <!-- 搜索和重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格组件（位于表单下方） -->
    <div class="order-table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <!-- 复选框列 -->
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <!-- 应收单号列 -->
        <el-table-column
          prop="receivableNo"
          label="应收单号"
          width="120">
        </el-table-column>

        <!-- 订单号列 -->
        <el-table-column
          prop="orderNo"
          label="订单号"
          width="120">
        </el-table-column>

        <!-- 客户列 -->
        <el-table-column
          prop="customer"
          label="客户"
          width="150">
        </el-table-column>

        <!-- 客户编码列 -->
        <el-table-column
          prop="customerCode"
          label="客户编码"
          width="120">
        </el-table-column>

        <!-- 合同名称列 -->
        <el-table-column
          prop="contractName"
          label="合同名称"
          width="120">
        </el-table-column>

        <!-- 订单状态列 -->
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          width="100">
        </el-table-column>

        <!-- 签收时间列 -->
        <el-table-column
          prop="signTime"
          label="签收时间"
          width="160">
        </el-table-column>

        <!-- 发货地址列 -->
        <el-table-column
          prop="shippingAddress"
          label="发货地址">
        </el-table-column>
      </el-table>

      <el-pagination
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {listOrder} from "@/api/tms/finance/Finance";

export default {
  name: 'OrderQuerySystem',
  data() {
    return {
      // 表单数据
      form: {
        orderStatus: '',
        startPlace: '',
        destination: '',
        signDate: [],
        keyword: ''
      },
      // 表格数据
      tableData: [],
      loading: false,
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dateRange: []
    };
  },
  created() {
    this.getList()
  },
  methods: {
    // 搜索方法
    handleSearch() {
      // 构造查询参数
      const queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderStatus: this.form.orderStatus,
        startPlace: this.form.startPlace,
        destination: this.form.destination,
        keyword: this.form.keyword
      };

      // 处理日期范围
      if (this.form.signDate && this.form.signDate.length === 2) {
        // 设置开始日期为当天00:00:00
        const startDate = new Date(this.form.signDate[0]);
        startDate.setHours(0, 0, 0, 0);
        queryParams.beginSignTime = this.formatDate(startDate);

        // 设置结束日期为当天23:59:59
        const endDate = new Date(this.form.signDate[1]);
        endDate.setHours(23, 59, 59, 999);
        queryParams.endSignTime = this.formatDate(endDate);
      }

      // 调用查询接口
      this.loading = true;
      listOrder(queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(error => {
        console.error('查询失败:', error);
        this.loading = false;
      });
    },
    // 重置方法
    handleReset() {
      this.form = {
        orderStatus: '',
        startPlace: '',
        destination: '',
        signDate: [],
        keyword: ''
      }
      this.getList()
      // 重置时也可以清空表格数据
      this.tableData = [];
    },
    /** 页面初始化加载数据 */
    getList() {
      this.handleSearch(); // 复用搜索逻辑
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.handleSearch();
    },
    // 日期格式化方法
    formatDate(date) {
      if (!date) return '';
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>
.order-query-system {
  padding: 20px;
}

.query-form {
  margin-bottom: 20px;
}

.order-table-container {
  margin-top: 10px;
}
</style>
